<template>
    <div>
        <div class="e-table billList">
            <div class="top">
                <div class="left">
                    <div class="listTop">
                        <el-button
                            size="small"
                            class="btn-greenYellow"
                            @click="openAddDialog"
                        >
                            新增</el-button
                        >
                        <el-button
                            size="small"
                            class="btn-greenYellow"
                            @click="exportData"
                        >
                            导出</el-button
                        >
                    </div>
                </div>
                <div class="right">
                    <div class="right-div1">
                        <el-input
                            placeholder="请输入关键字"
                            size="small"
                            v-model="pagination.keyword"
                            @blur="search"
                        >
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
                        </el-input>
                    </div>
                    <div>
                        <el-button
                            size="small"
                            style="background: #2e61d7; color: #fff"
                            @click="heightSharch"
                            >高级搜索
                        </el-button>
                    </div>
                </div>
            </div>
            <el-table
                ref="table"
                class="table"
                :data="tableData"
                border
                style="width: 100%"
                highlight-current-row
                height="0"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
            >
                <el-table-column label="设备编号"
                    class-name="blue-column"
                    min-width="200"
                    show-overflow-tooltip
                >
                    <template slot-scope="{ row }" >
                        <span @click="tableDbShow(row)">{{row.equipmentNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="equipmentName"
                    label="设备名称"
                    min-width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="plateNo"
                    label="车辆编号"
                    min-width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="specificationModel"
                    label="规格型号"
                    align="center"
                    min-width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="unit"
                    label="单位"
                    align="center"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="supplierName"
                    label="外协单位"
                    align="center"
                    min-width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="orgName"
                    label="所属机构"
                    align="center"
                    min-width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="paid"
                    label="已付租赁/设备费（元）"
                    align="center"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="unpaid"
                    label="未付租赁/设备费（元）"
                    align="center"
                    width="180">
                </el-table-column>
            </el-table>
            <ComPagination
                :total="totalPage"
                :pageSize.sync="pagination.limit"
                :currentPage.sync="pagination.page"
                @currentChange="listByEntity"
                @sizeChange="listByEntity"
                class="bottomSetting"
            />
        </div>
    </div>
</template>
<script>
import request from '@/api/equip/equipAccount.js'
import ComPagination from '@/components/pagination/pagination.vue'
import { mapState } from 'vuex'
import { vueDom, debounce, downloadFile, advanceSearch } from '@/utils/common.js'
export default {
    data () {
        return {
            tableData: [],
            pagination: {
                'belongOrgId': '',
                'equipmentName': '',
                'keyword': '',
                'limit': 20,
                'orgId': localStorage.getItem('searchOrgId'),
                'page': 1,
                'states': [],
                'supplierId': ''
            },
            totalPage: 0, //总页数
            tableHeight: 0,
        }
    },
    components: {
        ComPagination
    },
    computed: {
        ...mapState({
            unitMeasure: state=>state.equip.equipData.unitMeasure, //计量单位
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    created () {
        this.getDicValue()
        this.getList()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        //获取当前使用的字典
        getDicValue () {
            this.$store.dispatch('equip/setUnitMeasur')
        },
        getList () {
            request.outAccountList(this.pagination).then(res=>{
                this.tableData = res.list
                this.totalPage = res.totalCount
            })
        },
        //分页查询
        listByEntity () {
            this.getList()
        },
        //模糊搜索
        search () {
            this.getList()
        },
        //清空高级搜索的数据
        clearData () {
            this.pagination = {
                'belongOrgId': '',
                'equipmentName': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'states': [],
                'supplierId': ''
            }
            this.setSearchData({ equipSearchData: this.pagination })
        },
        heightSharch () {
            advanceSearch('/equipAccountHeightSearch?type=2').then(res => {
                this.pagination = res.equipSearchData
                this.getList()
                this.clearData()
            })
        },
        //新增
        openAddDialog () {
            this.$router.push('/outAccountAdd')
        },
        //导出
        exportData () {
            if(this.tableData.length === 0) {
                this.clientPop('err', '当前机构没有可导出的数据！')
                return
            }
            request.outAccountExport().then(res=>{
                downloadFile({ data: res, name: '外协台账.xlsx' })
            })
        },
        //查看
        tableDbShow (row) {
            this.$router.push({
                path: '/outAccountEdit',
                query: { billid: row.billId }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
